<template>
  <div class="top-bar">
    <div class="logo">
      <img src="/yksg.svg" alt="" class="logo-img">
      <p class="logo-name">留言墙</p>
    </div>
    <div class="menu">
      <YkButton :type="id == 0 ? 'cprimary' : 'csecondary'" @click="goTo(0)">留言墙</YkButton>
      <YkButton :type="id == 1 ? 'cprimary' : 'csecondary'" type="csecondary" @click="goTo(1)">照片墙</YkButton>
    </div>
    <div class="user">
      <div class="user-head"></div>
    </div>
  </div>
</template>

<script setup>
import {computed} from "vue"
import {useRouter, useRoute } from "vue-router"
import YkButton from "@/components/YkButton.vue"

const router = useRouter()
const route = useRoute()

const id = computed(() => {
  return route.query.id
})

function goTo(id) {
  router.push(`/mes?id=${id}`)
}

</script>

<style lang="less" scoped>
  .top-bar {
    width: 100vw;
    height: 53px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;

    // logo
    .logo {
      display: flex;
      align-items: center;
      .logo-name {
        font-size: 20px;
        color: @gray-1;
        font-weight: 600;
        margin-left: 10px;
      }
    }

    // 菜单
    .menu {
      width: 200px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .menu-item {

      }
    }

    // 用户头像
    .user {
      width: 102px;
      display: flex;
      justify-content: end;
      .user-head {  
        border-radius: 50%;
        height: 36px;
        width: 36px;
        background-image: linear-gradient(180deg, #7be7ff, #1e85e2);
      }
    }
  }
</style>